<template>
  <div>
    <div class="openTime-wrap">
      <el-form label-width="140px" :model="formData" v-loading="loading">
        <el-form-item label="油站名称：">
          <!-- 车主邦试点加油站【CDT00000000033】 -->
          {{currentGasStation}}
        </el-form-item>
        <el-form-item label="设置油站营业时间：">
          <el-radio-group v-model="formData.type">
            <el-radio label="all">24小时</el-radio>
            <el-radio label="custom">自定义</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自定义时间设置：" v-if="formData.type === 'custom'">
          <el-select v-model="formData.customType" placeholder="请选择" @change="selectChange">
            <el-option label="每日" value="everyday"></el-option>
            <el-option label="今日" value="today"></el-option>
          </el-select>
          <span class="time-label">开始时间</span>
          <el-time-picker
            v-model="formData.beginTime"
            format="HH:mm"
            placeholder="请选择开始时间">
          </el-time-picker>
          <span class="time-label">结束时间</span>
          <el-time-picker
            v-model="formData.endTime"
            format="HH:mm"
            placeholder="请选择结束时间">
          </el-time-picker>
        </el-form-item>
      </el-form>
      <div class="btn-group">
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getBusinessHour, setBusinessHour, getAllGasInfoList } from '@/api/gasStationManage/gasInfo'
import dayjs from 'dayjs'

export default {
  name: 'gasStationManage_openTime',
  data () {
    return {
      formData: {
        type: 'all',
        customType: 'everyday',
        beginTime: '',
        endTime: ''
      },
      loading: false,
      currentGasStation: ''
    }
  },
  methods: {
    async submit () {
      this.loading = true
      let params = {
        gasId: this.formData.gasId,
        type: this.formData.type
      }
      if (this.formData.type === 'custom') {
        let customType = this.formData.customType !== 'everyday' ? dayjs(new Date).format('YYYYMMDD'): 'everyday'
        if(!(this.formData.beginTime && this.formData.endTime)){
          this.loading = false
          return this.$message.warning('请先选择时间')
        }
        if(this.formData.beginTime.getTime() > this.formData.endTime.getTime()){
          this.loading = false
          return this.$message.warning('结束时间需晚于开始时间')
        }
        Object.assign(params, {
          beginTime: dayjs(this.formData.beginTime).format('HH:mm'),
          endTime: dayjs(this.formData.endTime).format('HH:mm'),
          customType
        })
      }
      try {
        const { code } = await setBusinessHour(params)
        if (code === 200) {
          this.$message.success('提交成功')
        }
      } catch (err) {
        console.log(err.message)
      } finally {
        this.loading = false
      }
    },
    // 初始化当前油站 
    async initCurrentGasStation () {
      try {
        const { code, result = [] } = await getAllGasInfoList()
        if (code !== 200) return
        this.currentGasStation = result.length ? result[0].gasName : ''
      } catch (err) {
        console.log(err.message)
      }
    },
    selectChange () {
      this.formData.beginTime = ''
      this.formData.endTime = ''
    }
  },
  async created () {
    //获取当前油站
    this.initCurrentGasStation()
    // 营业时间回显
    try {
      this.loading = true
      const { code, result } = await getBusinessHour()
      if (code !== 200) return
      Object.assign(this.formData, result)
      if (this.formData.type === 'custom') {
        if (this.formData.customType !== 'everyday') {
          this.formData.customType = 'today'
          const day = result.customType
          const beginTime = result.beginTime.split(':')
          const endTime = result.endTime.split(':')
          this.formData.beginTime = new Date(day.slice(0,4),day.slice(4,5),day.slice(5,6), beginTime[0], beginTime[1])
          this.formData.endTime = new Date(day.slice(0,4),day.slice(4,5),day.slice(5,6), endTime[0], endTime[1])
        } else {
          const year = dayjs().year()
          const month = dayjs().month()
          const date = dayjs().date()
          const beginTime = result.beginTime.split(':')
          const endTime = result.endTime.split(':')
          this.formData.beginTime = new Date(year, month, date, beginTime[0], beginTime[1])
          this.formData.endTime = new Date(year, month, date, endTime[0], endTime[1])
        }
      }else{
        // 防止后台接口污染
        this.formData.beginTime = ''
        this.formData.endTime = ''
      }
    } catch (err) {
      console.log(err.message)
    } finally {
      this.loading = false
    }
  }
}
</script>
<style lang="less" scoped>
  .openTime-wrap {
    background: #fff;
    margin-top: 20px;
    padding: 10px 20px;
    .time-label {
      margin-left: 30px;
      margin-right: 20px;
    }
    .btn-group {
      display: flex;
      justify-content: flex-end;
      margin: 40px 30px 20px 0;
      /deep/ .el-button {
        width: 126px;
        height: 40px;
      }
    }
  }
</style>